<template>
    <div class="mainBox">
        <el-row style="height:40px;">
            <el-col :span="2" :offset="22" style="height:40px;">
                <el-button type="primary" @click="goback">返回</el-button>
            </el-col>
        </el-row>
        <div >
            <el-row style="hieght:20px;margin-top:15px;">
               <el-col :span="1" style="color:#409EFF;font-size:20px;hieght:20px;" class="juZhong">
                    <i class="el-icon-s-order"></i>
               </el-col>
               <el-col :span="23" style="hieght:20px;">
                   <span style="color:#707070;font-size:16px;">基本信息</span>
               </el-col>
            </el-row>
            <el-row style="color:#707070;hieght:20px;">
                <el-col :span="2" :offset="1" style="height:20px;margin-top:15px;">
                    <span>招 聘 名：</span>
                </el-col>
                <el-col :span="21" style="height:20px;margin-top:15px;">
                    <span>{{postName}}</span>
                </el-col>
            </el-row>
            <el-row style="color:#707070;hieght:20px;">
                <el-col :span="2" :offset="1" style="height:20px;margin-top:15px;">
                    <span>发 布 方：</span>
                </el-col>
                <el-col :span="9" style="height:20px;margin-top:15px;">
                    <span>{{companyName}}</span>
                </el-col>
                <el-col :span="2" :offset="1" style="height:20px;margin-top:15px;">
                    <span>联系方式：</span>
                </el-col>
                <el-col :span="9" style="height:20px;margin-top:15px;">
                    <span>{{contact}}</span>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-row style="hieght:20px;margin-top:15px;">
               <el-col :span="1" style="color:#409EFF;font-size:20px;hieght:20px;" class="juZhong">
                    <i class="el-icon-s-data"></i>
               </el-col>
               <el-col :span="23" style="hieght:20px;">
                   <span style="color:#707070;font-size:16px;">重要指标</span>
               </el-col>
            </el-row>
            <el-row style="margin-top:20px">
                <el-col :span="23" :offset="1">
                    <el-table
                        :data="zhiBiao"
                        border
                        style="width: 90%">
                        <el-table-column
                        prop="dianJi"
                        label="点击量"
                        align="center"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="baoMing"
                        label="报名量"
                        align="center"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="shouCang"
                        label="收藏量"
                        align="center"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="fenXiang"
                        label="分享量"
                        align="center"
                        >
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </div>
        <div>
             <el-row style="hieght:20px;margin-top:15px;">
               <el-col :span="1" style="color:#409EFF;font-size:20px;hieght:20px;" class="juZhong">
                    <i class="el-icon-user-solid"></i>
               </el-col>
               <el-col :span="23" style="hieght:20px;">
                   <span style="color:#707070;font-size:16px;">报名情况</span>
               </el-col>
            </el-row>
            <el-row style="margin-top:20px">
                <el-col :span="23" :offset="1">
                    <el-table
                        :data="baoMing"
                        height="300"
                        border
                        style="width: 90%">
                        <el-table-column
                        prop="realname"
                        label="姓名"
                        align="center"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="contact"
                        label="联系方式"
                        align="center"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="date"
                        label="报名时间"
                        align="center"
                        >
                        </el-table-column>
                        <el-table-column
                        label="操作"
                        align="center"
                        >
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row)" type="text" size="small">发消息</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </div>
    </div>    
</template>

<script>
export default {
    data(){
        return{
            baoMing:[],
            zhiBiao:[{
                dianJi:'',
                baoMing:'',
                shouCang:'',
                fenXiang:''
            }],
           companyName:'',
           postName:'',
           contact:'',
           postId:'',
        }
    },
    mounted(){
        var postId=this.$route.query.postId;
        this.postId=postId;

        this.getpostInformation();
        this.getpostIndex();
        this.getpostCondition();
    },
    methods:{
        //报名信息
        getpostCondition(){
            var URL='http://47.101.180.43:8075/post/postCondition'
                        this.$ajax({
                        method:'get',
                        url:URL,
                        params:{
                            postId:this.postId,
                        },
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            this.baoMing=response.data.data;
                            console.log(this.baoMing);
                        }else{
                            console.log(response.data.msg); 
                            this.$notify({
                                message:response.data.msg
                            });
                        }
                    }).catch(error => {
                    console.log('报名获取失败');
                    });
        },
        //重要指标
        getpostIndex(){
            var URL='http://47.101.180.43:8075/post/postIndex'
                        this.$ajax({
                        method:'get',
                        url:URL,
                        params:{
                            postId:this.postId,
                        },
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            console.log(response.data.data);
                            this.zhiBiao[0].dianJi=response.data.data.clickCount;
                            this.zhiBiao[0].baoMing=response.data.data.enrollCount;
                            this.zhiBiao[0].shouCang=response.data.data.collectCount;
                            this.zhiBiao[0].fenXiang=response.data.data.shareCount;
                        }else{
                            console.log(response.data.msg); 
                            this.$notify({
                                message:response.data.msg
                            });
                        }
                    }).catch(error => {
                    console.log('重要指标获取失败');
                    });
        },
        //基本信息
        getpostInformation(){
            var URL='http://47.101.180.43:8075/post/postInformation'
                        this.$ajax({
                        method:'get',
                        url:URL,
                        params:{
                            postId:this.postId,
                        },
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            console.log(response.data.data);
                            this.postName=response.data.data.postName;
                            this.companyName=response.data.data.companyName;
                            this.contact=response.data.data.contact;
                        }else{
                            console.log(response.data.msg); 
                            this.$notify({
                                message:response.data.msg
                            });
                        }
                    }).catch(error => {
                    console.log('基本信息获取失败');
                    });
        },
        goback(){
             this.$router.push({
                path:'/companyPage/home/showPost',
            })
        },
        handleClick(row) {
            console.log(row);
        },
    }
}
</script>

<style>
.juZhong{
    display:flex;
    align-items:center;
    justify-content:center
}
.mainBox{
    position: relative;
    min-height: 700px;
	background-color: #FFFFFF;
	margin-top: 20px;
	padding: 20px;
	border-radius: 10px;
}
</style>